import React from 'react'
import {Grid, List} from 'antd-mobile'
import PropTypes from 'prop-types'
// import axios from 'axios' import {withRouter} from 'react-router-dom'
// @withRouter
class AvatarSelector extends React.Component {
    static propTypes = {
        selectAvatar: PropTypes.func.isRequired
    }
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        console.log(this.state);
        const avactarList = 'boy,girl'
            .split(',')
            .map(v => ({
                icon: require(`../img/${v}.jpg`),
                text: v
            }))
        const gridHeader = this.state.icon
            ? (
                <div>
                    <span>已选择头像</span><img
                        style={{
                    width: 20
                }}
                        src={this.state.icon}
                        alt=""/></div>
            )
            : '请选择头像'
        return (
            <div>
                <List  renderHeader={() => gridHeader}>
                    <Grid
                        onClick={elm => {
                        this.setState(elm);
                        this
                            .props
                            .selectAvatar(elm.text)
                    }}
                        columnNum={2}
                        data={avactarList}>
                        头像选择
                    </Grid>
                </List>
            </div>
        )
    }
}

export default AvatarSelector